import { Badge, Segmented } from "antd";
import styles from "./index.module.less";
import { useEffect, useState } from "react";
import { clsx } from "../common/utils";

export const SwitchButton: React.FC<{
  data: { label: string; value: string; count?: number; dot?: boolean }[];
  defaultValue: string;
  className?: string;
  onChange?: (value: string) => void;
}> = ({ data, defaultValue, className, onChange }) => {
  const [value, setValue] = useState(defaultValue);
  useEffect(() => {
    onChange?.(value);
  }, [value]);
  return (
    <Segmented
      className={clsx(styles.SwitchButton, className)}
      value={value}
      options={data.map((v) => ({
        ...v,
        label: (
          <Badge
            dot={v.dot}
            size="small"
            count={v.count === undefined ? 0 : v.count}
            offset={[10, -10]}
            style={{ zIndex: 10 }}
          >
            <div>{v.label}</div>
          </Badge>
        ),
      }))}
      onChange={(v: any) => setValue(v)}
    />
  );
};
